<template>
<footer class="page-footer">
  <div class="page-footer-inner">
    <el-row :gutter="16">
      <el-col :sm="24" :lg="19">
        <div class="friends-link">
          <span>友情链接：</span>
          <a href="#">随波网（suibo.co）</a>
          <a href="#">PPT模板 (SlideGo.cn)</a>
          <a href="#">图一波（tuyibo.cn）</a>
        </div>
        <div class="site-map">
          <span>网站地图：</span>
          <a href="#">关于我们</a>
          <a href="#">用户下载协议</a>
          <a href="#">隐私政策</a>
          <a href="#">联系我们</a>
          <a href="#">加入我们</a>
        </div>
        <div class="copy">
          <p><span>粤ICP备18053626号-3</span><span>技术与服务：service@slidego.cn</span>
            <span>侵权投诉：feed@slidego.cn</span>
            <span>商务合作：0756-3613160</span></p>
            <p>Copyright © 2020 图一波 tuyibo.cn</p>
        </div>
      </el-col>
      <el-col :lg="5" class="hidden-md-and-down">
        <div class="qr-code-group">
          <p><img src="@/assets/images/qrcode.jpg" style="width:120px;" alt="官方公众号"><br><span>官方公众号</span></p>
        </div>
      </el-col>
    </el-row>
  </div>
</footer>
</template>

<script>
export default {
  name: 'PageFooter',
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.page-footer {
    padding: 20px 0;
    background-color: @color-text-primary;
    .page-footer-inner {
        max-width: 1380px;
        margin: 0 auto;
        padding: 0 16px;
        color: @color-info;
        .friends-link {
            font-size: 16px;
            margin-bottom: 10px;
            a,
            span {
                margin-right: 15px;
                color: @color-info;
            }
        }
        .site-map {
            font-size: 16px;
            a,
            span {
                margin-right: 15px;
                color: @color-info;
            }
        }
        .copy {
            margin-top: 10px;
            margin-bottom: 10px;
            span {
                margin-right: 15px;
            }
        }
        .qr-code-group {
            display: flex;
            align-items: center;
            color: @color-info;
            justify-content: space-around;
            position: relative;
            p {
                text-align: center;
            }
            &:before {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                height: 110px;
                border-left: 1px solid @color-info;
            }

        }
    }
}
</style>
